// 引入基类接口
import Base from "../base.js"
// 引入放映厅api
import ProjectionHallApi from "../../api/projectionHall.js";
// 引入影院api
import cinemaApi from "../../api/cinemas.js";

// 暴露并创建新增学生视图
export default class extends Base {
    // 设置this.data
    constructor(props) {
        super(props);
        this.data = {
            _id: props._id,
            
        }
        this.addDate={}
    }
    render() {
        this.$el.html(`
        <h1 style="width:196px;margin:60px auto 40px;" >修改放映厅信息</h1>
        <form style="width:513px;flex-flow:wrap;margin:auto;border: groove;padding:50px 100px;" class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label" style="padding: 9px 0;">放映厅名</label>
                <div class="layui-input-block">
                    <input type="test" name="name" required placeholder="请输入放映厅名称" lay-verify="required" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="padding: 9px 0;">所属影院</label>
                <div class="layui-input-block">
                    <select name="cinemasId" lay-verify="required" lay-filter="demo"></select>
                </div>
            </div>
            <div class="layui-form-item" id="status">
                <label class="layui-form-label" style="padding: 9px 0;height:38px;">是否营业</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" value="true" title="是" lay-filter="ChoiceRadio">
                    <input type="radio" name="status" value="false" title="否" lay-filter="ChoiceRadio">
                </div>
            </div>
            <div>
                <div style="width: 114px;margin: auto;">
                    <button id="submit-btn" type="reset" class="layui-btn">立即提交</button>
                </div>
            </div>
        </form>
        `)
        const form = layui.form;
        form.render();
        // 获取提交键
        this.$submitBtn = $("#submit-btn");
        // 获取输入框
        this.$status = $("input[name=status]")
        this.$name = $("input[name=name]")
        this.$cinemasId = $("select[name=cinemasId]")
        console.log(this.$status);

    }

    // 提交事件
    async submitHandle() {
        // 获取营业状态
        const status = this.addDate[`status`];
        // 获取放映厅名
        const Name = this.$name.val();
        // 获取所属影院
        const cinemasId = this.addDate[`cinemaId`];
        
        const _id = this.data._id;
        console.log({ Name, status, cinemasId, _id });
        // 向数据服务器发送请求
        const data = await ProjectionHallApi.reset({ Name, status, cinemasId, _id });
        // 添加业务处理
        if (data) {
            alert("添加成功！")
            // 添加成功后修改路由路径切换到登录视图
            location.hash = "#/info/projectionHall";
        } else {
            alert("添加失败！！")
        }
    }


    rerender() {
        // 渲染影院
        this.$cinemasId.html(`${this.data.cinema.map(item => {
            return `<option value="${item._id}">${item.name}</option>`
        }).join("")
            }`)
        console.log($(`input[name=status]:eq(0)`).attr("checked"));
        // 获取放映厅的数据
        const { name, status, cinemasId } = this.data;
        // 将获取的数据渲染到对应单元格
        this.$name.val(name);
        if (status) {
            console.log("in");
            $("input[name=status]:eq(0)").attr("checked", true)
            console.log($('input[name=status]:checked').val());
            console.log($(`input[name=status]:eq(1)`).attr("checked"));
        } else {
            $("input[name=status]:eq(1)").attr("checked", true)
            console.log($('input[name=status]:checked').val());
        };
        this.$cinemasId.val(cinemasId);
    }

    async getCinema() {
        // 获取影院数据
        this.data.cinema = await cinemaApi.getData();
        // 重新渲染，将影院数据渲染到页面上
        this.rerender();
    }


    // 获取一个放映厅数据
    async getOne() {
        // 获取放映厅id
        const { _id } = this.data;
        // 获取该放映厅数据并赋值给this.data
        this.data = await ProjectionHallApi.getOne(_id);
        console.log(this.data);
    }

    async mounted() {
        await this.getOne();
        await this.getCinema();
        this.rerender();
        const form = layui.form;
        form.render();
    }

    // select事件监听
    changeHandel() {
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        const that = this;
        form.on('select(demo)', function (e) {
            console.log(that.addDate);
            const cinemaId = e.value;
            that.addDate["cinemaId"]=cinemaId;
            console.log(that.addDate);
            // return cinema;
        })
    }

    // 单选框监听事件
    radioHandel(){
        const layer = layui.layer, $ = layui.jquery, form = layui.form;
        const that = this;
        form.on('radio(ChoiceRadio)', function(data){
            console.log(that.addDate);
            const status=data.value;
            that.addDate["status"]=status;
            console.log(that.addDate);

          });
    }

    // 绑定事件代理
    handle() {
        // 提交事件
        this.$submitBtn.on("click", this.submitHandle.bind(this));
        // 下拉列表改变
        this.changeHandel();
        // 单选框改变
        this.radioHandel();
    }
}